<template>
  <div>{{ list }}</div>
  <div>过滤掉大于3元素，展示一个数组 {{ list.filter((item) => item > 3) }}</div>
  <div>计算属性1： {{ filterList }}</div>
  <div>计算属性2： {{ simpleList }}</div>
</template>

<script setup>
import { ref, computed } from 'vue';

const list = ref([1, 2, 3, 4, 5]);

// 模板上面不要写太复杂的语句， 如果有，通过计算属性去代替
const filterList = computed(() => {
  const tmp = list.value.filter((item) => {
    return item > 3;
  });
  return tmp;
});
// 下面是简写语法： 箭头函数的简写语法，如果忘记了去看
// 阮一峰的文档 https://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0
// 箭头函数 只有一行，并且是return语句的话，可以省略大括号 和 return 语句。下面代码是两个箭头函数的简写
const simpleList = computed(() => list.value.filter((item) => item > 3));
</script>
